<template>
        <el-container class="shop-page">
            <el-aside width="250px" style="margin-left: 30px;margin-top: 25px;">
                <el-row class="tac">
                    <el-col :span="24">
                        <el-menu
                                class="el-menu-vertical-demo"
                                @open="handleOpen"
                                @close="handleClose">
                            <el-submenu :index="String(ind)" v-for="(item,ind) in category" :key="item.index">
                                <template slot="title">
                                    <span class="firstname" @click="firstCategory(item.fid)">{{item.firstname}}</span>
                                </template>
                                    <el-menu-item v-for="(sn) in item.secondname" :key="sn.index" class="secondname">{{sn}}</el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-main >
                <el-row  >
                    <el-col :span="22" :offset=1><div class="shop-top-toolbar">
                        <a><i class="el-icon-s-grid" style="font-size: 30px;color: #E2214B"></i></a>
                        <a><i class="el-icon-document" style="font-size: 30px"></i></a>
                    </div>
                    </el-col>
                    <el-col :span="5" :offset=1  v-for='(item,index) in ShowShop' :key="index"><GoodsCard
                                 :key="item.index"
                                 :goodsname="item.goodsname"
                                 :goodsprice="item.goodsprice"
                                 :goodpic="item.goodsPicturepaths[0].gpPicpath"
                                 :goodsdiscount="item.goodsdiscount"
                                 @click.native="gotoDetails(item)"
                            class="new-goods"></GoodsCard>
                    </el-col>

                </el-row>
            </el-main>
        </el-container>
</template>

<script>
    import GoodsCard from "../../components/GoodsCard";
    export default {
        components:{
            "GoodsCard":GoodsCard,
        },
        data() {
            return {
                ServeUrl:this.$store.state.beginUrl,
                category:[],
                ShowShop:[],
                firstCategoryShow:[]
            }
        },
        methods: {
            handleOpen(key, keyPath) {

            },
            handleClose(key, keyPath) {

            },
            firstCategory(fid){
                this.$axios.get("/goods/querybyFirstCategory?firstCategoryid="+fid).then(ret=>{
                    this.ShowShop=[ ];
                    ret.data.forEach(data=>{
                        this.ShowShop.push({
                            goodsid:data.goodsid,
                            goodsname:data.goodsname,
                            goodsprice:data.goodsprice,
                            goodsbrand:data.goodsbrand,
                            goodsdiscount:data.goodsdiscount,
                            goodsPicturepaths:data.goodsPicturepaths
                        })
                    });
                })
            },
            gotoDetails:function(item){
                this.$store.commit('updateshopdetail',item)
                this.$router.push({name:"Details",params:{goods:item}})
            },
        },
        created(){
            this.$axios.get("/goods/queryall").then(ret=>{
                ret.data.forEach(data=>{
                    this.ShowShop.push({
                        goodsid:data.goodsid,
                        goodsname:data.goodsname,
                        goodsprice:data.goodsprice,
                        goodsbrand:data.goodsbrand,
                        goodsdiscount:data.goodsdiscount,
                        goodsPicturepaths:data.goodsPicturepaths
                    })
                });
            })
            this.$axios.get("/firstcategory/list").then(ret=>{
                ret.data.forEach(data=>{
                    this.category.push({
                        firstname:data.fcName,
                        fid:data.fcId,
                        secondname:[]
                    })
                })
            })
        },
    }
</script>

<style scoped>
    a{
        cursor: pointer;
    }
    .shop-page{
        background: #EFEFEF;
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .firstname{
        border-bottom: 1px solid #eeeeee;
        color: #272727;
        display: block;
        font-weight: bold;
        letter-spacing: 1.5px;
        line-height: 21px;
        padding: 15px 10px 15px 30px;
        text-transform: uppercase;
    }
    .secondname{
        border-bottom: 1px solid #eeeeee;
        color: #6f6f6f;
        display: block;
        font-size: 12px;
        line-height: 17px;
        padding: 10px 10px 10px 30px;
        text-align: center;
    }
    .secondname:hover{
        color: #e2214b;
    }
    .shop-top-toolbar{
        background: #fff none repeat scroll 0 0;
        border-radius: 1px;
        margin-bottom: 56px;
        overflow: hidden;
        padding: 17px 20px 14px;
    }
    .shop-top-toolbar a i{
        margin-left: 15px;
    }
    .new-goods{
        box-shadow: 0 0 15px #9e9e9e;
        transition: 0.3s;
        margin-bottom: 30px;
    }
    .new-goods:hover{
        transition: 0.3s;
        transform: scale(1.1);
    }
</style>